<template>
	<view class="home">
		<!-- 顶部背景 -->
		<view class="top-background"></view>
		<!-- 轮播图 -->
		<up-swiper keyName="image" :circular="true" :list="banner" :height="190" :radius="17" :display-multiple-items="0"></up-swiper>
		<!-- 标签 -->
		<Tag :data="headline" />
		<!-- 指南手册 -->
		<Handbook :data="article" />
		<!-- 评论 -->
		<z-paging ref="paging" :fixed="false" use-page-scroll v-model="dataList" @query="queryList">
			<view class="comment-list" v-if="dataList.length>0">
				<Comment v-for="(item, index) in dataList" :key="index" :data="item" />
			</view>
		</z-paging>
		<!-- 限制接单 -->
		<RestrictedOrder ref="RestrictedOrderRef" />
	</view>
</template>

<script setup>
	import Tag from './components/tag.vue'
	import Handbook from './components/handbook.vue'
	import Comment from './components/comment.vue'
	import RestrictedOrder from '@/components/RestrictedOrder.vue'
	import { useTripStore } from '@/store/index.js'
	import {
		onMounted,
		ref
	} from 'vue'
	import home from '@/api/home.js'
	// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
	import {
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	onMounted(() => {
		indexDataFn()
	})
	onShow(() => {
		useTripStore().setDetail({})
	})
	const banner = ref([]);
	const headline = ref([])
	const article = ref([])
	const indexDataFn = async () => {
		const { status, info, data } = await home.indexData()
		console.log(data);
		if(status == 1) {
			banner.value = data.banner
			headline.value = data.headline
			article.value = data.article
		}
	}
	const dataList = ref([])
	const paging = ref()
	// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
	useZPaging(paging)
	const queryList = async (pageNo, pageSize) => {
		console.log('列表', pageNo, pageSize);
		const { status, info, data } = await home.indexComment({page: pageNo, page_size: pageSize})
		if(status == 1) {
			paging.value.complete(data.list)
		}
	}
	// 限制弹框
	const RestrictedOrderRef = ref()
</script>

<style lang="scss" scoped>
	.home {
		padding: 24rpx;

		.comment-list {
			background: #fff;
			border-radius: 32rpx;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(128, 128, 128, 0.06);
			padding: 24rpx;
		}
	}
</style>